<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>screen对象</title>
</head>
<body>
<button class="b1">width:获取整个屏幕的宽度</button>
<button class="b1">height:获取整个屏幕的高度</button>
<button class="b1">availWidth:获取浏览器窗口在屏幕上可占用的水平空间</button>
<button class="b1">availHeight:获取浏览器窗口在屏幕上可占用的垂直空间</button>
<script>
  let btn=document.querySelectorAll('.b1');
  btn[0].onclick=function (){
    console.log('width:'+screen.width);
  }
  btn[1].onclick=function (){
    console.log('height'+screen.height);
  }
  btn[2].onclick=function (){
    console.log('availWidth:'+screen.availWidth);
  }
  btn[3].onclick=function (){
    console.log('availHeight'+screen.availHeight);
  }
</script>
</body>
</html>